<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    title="上传资源"
    @cancel="onClose"
    :footer="false"
  >
    <div class="upload-wrapper">
      <a-upload
        v-model:file-list="fileList"
        :multiple="true"
        name="file"
        :customRequest="uploadRequest"
      >
        <a-button>
          <upload-outlined></upload-outlined>
          选择文件
        </a-button>
      </a-upload>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import api from "@/api/resource/fileResource";
import { UploadFileResourceInputDto } from "@/api/resource/types";
import { UploadOutlined } from "@ant-design/icons-vue";

const fileList = ref([]);
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  isPublic: { type: Boolean, default: false },
  dir: { type: Object, required: true },
});

const emits = defineEmits(["update:visible", "close"]);

const uploadRequest = (options: any) => {
  let data: UploadFileResourceInputDto = {
    dirId: props.dir.id,
    bucketName: props.dir.bucketName,
    fileName: options.file.name,
    isPublic: props.isPublic,
    file: options.file,
  };
  api.upload(data).then((res) => {
    options.onSuccess(res, options.file);
  });
};

const onClose = () => {
  emits("update:visible", false);
  emits("close");
};
</script>

<style lang="less" scoped>
.upload-wrapper {
  min-height: 240px;
}
</style>
